<!-- 跳蚤市场商品详情 -->
<template>
  <view class="container">
    <!-- 发布人信息 -->
    <view class="avator" v-if="JSON.stringify(detail)!='{}'" @click="go_sller_index(detail.user_id)">
      <view class="avator-img" v-show="detail.user_info">
        <image :src="detail.user_info.avatar" mode=""></image>
      </view>
      <view class="avator-info" v-show="detail.user_info">
        <view> {{detail.user_info.nickname}} </view>
		<!-- 发布于泰安 -->
        <view> {{detail.created_at}}</view>
      </view>
      <image
        class="right_arrow"
        src="https://community.chuangxiangdianli.com/images/neighborimg/market/xiangqinng_arrow@2x.png"
        mode=""
      ></image>
    </view>
    <!-- 商品详情 -->
    <view class="goods-detail" v-if="JSON.stringify(detail)!='{}'">
      <view class="goods-name"> {{detail.goods_name}} </view>
      <view>
        <text>{{detail.address}}</text>
        <text>{{detail.created_at}}</text>
      </view>
      <view>
        <view class="bg"> {{detail.type_text}} </view>
        <view class="price"> ￥{{detail.goods_price}} </view>
      </view>
      <view>
        {{detail.goods_content}}
      </view>
      <view>
        <view class="img">
		  <template v-for="item in detail.goods_images">
		  	<image :key="item" :src="item" mode="widthFix"></image>
		  </template>
        </view>
      </view>
    </view>
    <view class="line"> </view>
    <!-- 留言 -->
    <view class="message">
      <view class="message-title"> 留言 {{message_list.length}} </view>
      <view class="message-list">
        <template v-for="item in message_list">
          <view :key="item.id" class="message-item">
            <view>
				<image :src="item.user_info.avatar" mode=""></image>
			</view>
            <view>
              <view> {{item.user_info.username}} </view>
              <view> {{item.created_at}} </view>
              <view @click="open_message_send(item)">
                {{ item.content }}
              </view>
             <view v-if="item.children.length>0">
             	<ChildMessage 
					v-if="item.children.length>0"
					:user="item"
					:children="item.children">
				</ChildMessage>
             </view>
            </view>
          </view>
        </template>
		<u-loadmore :status="status" />
      </view>
    </view>
    <!-- 底部菜单栏 -->
    <view class="fiexed-bottom">
      <view class="fiexed-item" @click="open_message_send">
        <image
          src="https://community.chuangxiangdianli.com/images/neighborimg/market/liuyan@2x.png"
          mode=""
        ></image>
        <text>留言</text>
      </view>
      <view class="fiexed-item">
        <image
          v-if="!detail.is_collect"
          src="https://community.chuangxiangdianli.com/images/neighborimg/market/xing_n@2x.png"
          mode=""
		  @click="collect"
        ></image>
        <image
          v-else
          src="https://community.chuangxiangdianli.com/images/neighborimg/market/xing_s@2x.png"
          mode=""
		  @click="collect"
        ></image>
        <text>收藏</text>
      </view>
      <view class="fiexed-item" @click="make_phone">
        <image
          src="https://community.chuangxiangdianli.com/images/neighborimg/market/phone@2x.png"
          mode=""
        ></image>
        <text>联系</text>
      </view>
      <view class="want" @click="buy"> 我想要 </view>
    </view>
    <!-- 发布留言的弹框 -->
    <u-popup
      v-model="show_message_modal"
      mode="bottom"
      height="300rpx"
      @close="close_message_modal"
    >
      <view class="message-modal">
        <view class="input">
          <input
            type="text"
            placeholder="留下你的精彩留言吧"
            v-model="message_send_text"
			@keyup.enter="send_message"
          />
          <image
            src="https://community.chuangxiangdianli.com/images/neighborimg/market/liuyan_fabu.png"
            mode=""
			@click="send_message"
          ></image>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<!-- js -->
<script>
// 引入封装的请求
import request from '@/utils/request.js'	
// 留言
import ChildMessage from './ChildMessage.vue'
export default {
	components:{
		ChildMessage
	},
  data() {
    return {
		// 商品id
		id:null,
		// 商品详情
		detail:{},
		message_list: [],
		// 留言弹框的显示/隐藏
		show_message_modal: false,
		// 发布留言的内容
		message_send_text: "",
		// 当前回复的评论的id
		pid:null,
		// 当前页码
		pageNo:1,
		// 当前的数据条数
		limit:10,
		// 是否正在请求数据
		is_loading:false,
		// 是否请求完数据
		is_bottom:false,
		// 底部正在加载中
		status: 'loadmore',
    };
  },
  // 页面底部加载
  onReachBottom(){
  	let that = this
  	this.status = 'loading';
  	// console.log(11111)
  	if(that.status = 'nomore' || that.is_loading){
  		return false
  	}
  	this.pageNo++
  	setTimeout(() => {
  		that.get_mesage(true)
  	}, 1000)
  },
  computed: {},
  watch: {},
  onLoad(options) {
	// console.log(options.id)
	this.id = options.id
  },
  onShow() {
	  this.get_info()
	  this.get_mesage()
  },
  methods: {
	  // 去下单
	  buy(){
		  uni.navigateTo({
		  	url:'/neighbor/market/order/orderCheck?id='+this.id
		  })
	  },
	  // 取消/收藏商品
	  collect(){
		  let that = this
		  request.post({
			  url:'Mini/circle/flea/collectionGoods',
			  data:{
				  goods_id:that.id
			  }
		  }).then(res=>{
			  uni.showToast({
			  	title:res.msg,
				success() {
					if(res.code==200){
						that.get_info('none')
					}
				}
			  })
			  
		  })
	  },
	  // 拨打电话
	  make_phone(){
		  let that = this
		  uni.makePhoneCall({
		  	phoneNumber:that.detail.user_info.phone
		  })
	  },
	  // 发送评论
	  send_message(){
		  // console.log(this.message_send_text)
		  let pid;
		  if(!this.pid){
			  pid = 0
		  }else{
			  pid = this.pid
		  }
		  if(this.message_send_text.length==0){
		  	uni.showToast({
		  		title:"评论不能为空",
		  		icon:"none"
		  	})
		  	return
		  }
		  // console.log(pid)
		  // return false
		  let that = this
		  request.post({
			  url:'wechat/addFleaMsg',
			  data:{
				  goods_id:that.id,
				  content:that.message_send_text,
				  pid
			  }
		  }).then(res=>{
			  // console.log(res)
			  if(res.code==200){
				uni.showToast({
					title:res.msg
				})
				that.message_send_text = ''
				that.pid = null
				that.show_message_modal = false
				this.get_mesage()
			  }else{
				  uni.showToast({
				  	title:res.msg
				  })
			  }
		  })
	  },
	 // 获取商品详情
	 get_info(turn){
		let that = this
		request.get('wechat/flea_goods/'+that.id,{
			id:that.id
		},turn).then(res=>{
			console.log(res)
			if(res.code==200){
				that.detail = res.data
			}
		})
	 },
	 // 获取留言列表
	 get_mesage(turn){
		let that = this
		request.get('wechat/fleaMsgIndex',{
			goods_id:that.id
		}).then(res=>{
			that.is_loading = false
			if (res.code==200) {
				if(turn){
					if(res.data.data.length>0){
						that.message_list = [
							...that.message_list,
							...res.data.data
						]
					}
				}else{
					that.message_list = res.data.data
				}
				
				if(res.data.total==that.message_list.length){
					// that.is_boottom = true
					that.status = 'nomore';
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}) 
	 },
    // 打开留言
    open_message_send(item) {
		if(item){
			this.pid = item.id
		}
      this.show_message_modal = true;
    },
    // 发布留言的弹框关闭
    close_message_modal() {
      // console.log(11111);
      this.message_send_text = "";
    },
    // 前往卖家主页
    go_sller_index(id) {
      uni.navigateTo({
        url: "/neighbor/market/seller/index?id="+id,
      });
    },
  },
};
</script>
<!-- css -->
<style lang="scss" scoped>
.container {
  width: 100vw;
  background-color: #fff;
  box-sizing: border-box;
  font-family: PingFang SC;
  padding-bottom: 120rpx;
  overflow: auto;
  @mixin style-line($width, $height, $bgcolor) {
    width: $width;
    height: $height;
    background-color: $bgcolor;
  }
  .avator {
    width: 100%;
    height: 184rpx;
    background-color: #f3f5f8;
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;
    .right_arrow {
      position: absolute;
      width: 26rpx;
      height: 26rpx;
      top: 33rpx;
      right: 22rpx;
    }

    .avator-img {
      flex-shrink: 0;
      width: 132rpx;
      height: 132rpx;
      // border: 1rpx solid red;
      box-sizing: border-box;
      margin-right: 51rpx;
      border-radius: 20rpx;
      overflow: hidden;
      & > image {
        width: 100%;
        height: 100%;
      }
    }
    .avator-info {
      flex-shrink: 0;
      width: 380;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .goods-detail {
    width: 100%;
    padding-top: 39rpx;
    padding-bottom: 26rpx;
    @mixin common-style($left, $right) {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: $left;
      padding-right: $right;
    }
    .goods-name {
      width: 100%;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      text-align: center;
      margin-bottom: 25rpx;
	  box-sizing: border-box;
	  padding:0 100rpx;
    }
    & > view:nth-child(2) {
      @include common-style(55rpx, 50rpx);
      justify-content: space-between;
      margin-bottom: 22rpx;
    }
    & > view:nth-child(3) {
      @include common-style(49rpx, 49rpx);
      margin-bottom: 64rpx;
      .bg {
        padding: 8rpx 12rpx;
        background: #f2f3f7;
        border-radius: 10rpx;
        font-size: 22rpx;
        font-family: Hiragino Sans GB;
        font-weight: normal;
        color: #666666;
        margin-left: 20rpx;
        &:nth-child(1) {
          margin-left: 0;
        }
      }
      .price {
        font-size: 50rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #b83d42;
        margin-left: auto;
      }
    }
    & > view:nth-child(4) {
      @include common-style(26rpx, 36rpx);
      text-indent: 2em;
      line-height: 56rpx;
      margin-bottom: 60rpx;
    }
    & > view:nth-child(5) {
      @include common-style(30rpx, 30rpx);
      .img {
        width: 690rpx;
        border: 1rpx solid #e4e7ed;
        box-sizing: border-box;
        image {
          width: 100%;
		  margin-top: 20rpx;
		  &:nth-child(1){
			  margin-top: 0;
		  }
        }
      }
    }
  }
  .line {
    @include style-line(100%, 9rpx, #f3f5f8);
  }
  .message {
    width: 100%;
    .message-title {
      width: 100%;
      box-sizing: border-box;
      padding-left: 28rpx;
      height: 72rpx;
      line-height: 72rpx;
      border-bottom: 2rpx solid #dcdcdc;
      font-size: 30rpx;
      font-family: Hiragino Sans GB;
      font-weight: normal;
      color: #333333;
    }
    @mixin ellipsis-one-style {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .message-list {
      margin-top: 20rpx;
      .message-item {
        margin-top: 32rpx;
        display: flex;
		box-sizing: border-box;
		padding-left: 20rpx;
        &:nth-child(1) {
          margin-top: 0;
        }
        & > view:nth-child(1) {
          width: 58rpx;
          height: 58rpx;
          flex-shrink: 0;
          margin-right: 27rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        & > view:nth-child(2) {
          flex-shrink: 0;
          margin-top: 7rpx;
          & > view:nth-child(1) {
            @include ellipsis-one-style max-width: 327rpx;
            font-size: 26rpx;
            font-family: Hiragino Sans GB;
            font-weight: normal;
            color: #666666;
            margin-bottom: 15rpx;
          }
          & > view:nth-child(2) {
            margin-bottom: 23rpx;
            font-size: 18rpx;
            font-family: Hiragino Sans GB;
            font-weight: normal;
            color: #999999;
          }
          & > view:nth-child(3) {
            width: 527rpx;
            margin-bottom: 15rpx;
          }
          & > view:nth-child(4) {
            width: 619rpx;
            // height: 75rpx;
            background: #f6f6f6;
            border-radius: 5rpx;
            box-sizing: border-box;
            padding: 22rpx 12rpx;
          }
        }
      }
    }
  }
  .fiexed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 98rpx;
    background: #ffffff;
    box-shadow: 0px -4rpx 46rpx 0rpx rgba(196, 196, 196, 0.3);
    z-index: 99;
    display: flex;
    align-items: center;
    .fiexed-item {
      margin-left: 24rpx;
      display: flex;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 23rpx;
      }
      &:nth-child(1) {
        image {
          margin-right: 30rpx;
        }
      }
      &:nth-child(2) {
        margin-left: 25rpx;
        image {
          margin-right: 26rpx;
        }
      }
      &:nth-child(3) {
        margin-left: 35rpx;
      }

      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
    .want {
      width: 147rpx;
      height: 60rpx;
      background: #fc9e00;
      border-radius: 30rpx;
      font-size: 30rpx;
      font-family: Hiragino Sans GB;
      font-weight: normal;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: 25rpx;
    }
  }
  .message-modal {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 2rpx;
    display: flex;
    align-items: flex-end;
    .input {
      width: 100%;
      height: 76rpx;
      background: #ffffff;
      box-shadow: 0px 0px 13rpx 0px rgba(164, 164, 164, 0.17);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 24rpx;
      input {
        width: 670rpx;
        height: 100%;
      }
      image {
        width: 54rpx;
        height: 54rpx;
      }
    }
  }
}
</style>
